<template>
  <div>
    <Alert :title="title" :type="type" ref="alert" class="mb20" />
    <div class="card-box">
      <el-row>
        <el-col :md="20">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="运营商搜索：" class="mt_5">
              <el-input v-model="formInline.user" placeholder="运营商名称"></el-input>
            </el-form-item>
            <el-button type="primary" @click="selectCarrierName">
              <i class="el-icon-search"></i>
            </el-button>
            <el-button type="primary" @click="getCarrierData">
              <i class="el-icon-refresh"></i>
            </el-button>
            <el-button type="primary" @click="dialogVisible = true">运营商刷选</el-button>
            <el-button type="primary" @click="dialogVisible1 = true">图片上传</el-button>
            <el-button type="primary" @click="dialogVisible2 = true">文件上传</el-button>
          </el-form>
          <el-dialog title="运营商筛选" :visible.sync="dialogVisible" width="40%">
            <el-form>
              <el-row class="lh33">
                <el-col :md="8" class="tr">
                  运营商归类：
                </el-col>
                <el-col :md="16">
                  <el-select v-model="carrier_type" filterable placeholder="请选择" class="w100">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="selectCarrier">查询</el-button>
                    </span>
          </el-dialog>
          <el-dialog title="运营商筛选" :visible.sync="dialogVisible1" width="40%">
            <el-form ref="ruleForm" label-width="150px" class="demo-ruleForm">
              <el-form-item label="上传图片：">
                <el-upload class="upload-demo" action="/api/carriers/upload_test" :on-preview="handlePreview" :file-list="fileList" :before-upload="beforeupload" :limit="1" ref="upload" :auto-upload="false" accept="image/jpeg,image/png">
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
              <el-form-item label="公司名称：">
                <el-input v-model="ruleForm.company_name" placeholder="公司名称" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible1 = false">取 消</el-button>
                      <el-button type="primary" @click="submitUpload">确认</el-button>
                  </span>
          </el-dialog>
          <el-dialog title="文件上传" :visible.sync="dialogVisible2" width="40%">
            <el-form ref="ruleForm" label-width="150px" class="demo-ruleForm">
              <el-form-item label="上传图片：">
                <el-upload class="upload-demo" action="/api/carriers/upload_test" :on-preview="handlePreview" :file-list="fileList" :limit="1" ref="upload1" :before-upload="beforeupload" :auto-upload="false" accept=".txt">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传txt文件，且不超过10M</div>
                </el-upload>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible2 = false">取 消</el-button>
                      <el-button type="primary" @click="submitUpload1">确认</el-button>
                  </span>
          </el-dialog>
        </el-col>
        <el-col :md="4" class="float-right">
          <router-link to="/carriers/new">
            <el-button type="primary">新增</el-button>
          </router-link>
        </el-col>
      </el-row>
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column prop="name" label="运营商" width="160">
          <template slot-scope="scope">
                  <span class="link" @click="getDetail(scope.row)">{{ scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="contact_person" label="联系人" width="160">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="160">
        </el-table-column>
        <el-table-column prop="phone_number" label="联系电话" width="160">
        </el-table-column>
        <el-table-column prop="activecardnum" label="活跃卡号数量">
        </el-table-column>
        <el-table-column prop="methods" label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="editSingData(scope.row)">
              编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteSingData(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row v-show="total > 2">
        <el-col :span="24">
          <Pagination 
            @handleNextClick="nextClick"
            @handlePrevClick="prevClick" 
            @handleSizeChange="sizeChange"
            @handleCurrentChange="currentChange"
            :total="total"
            :pageSize="pageSize"
            />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import Alert from '@/base/alert/index'
  import Pagination from '@/base/pagination/index'
  export default {
    data() {
      return {
        fileList: [],
        total: 0,
        pageSize: 2,
        dialogVisible1: false,
        dialogVisible2: false,
        title: '',
        type: '',
        formInline: {
          user: ''
        },
        ruleForm: {
          company_name: ''
        },
        dialogVisible: false,
        options: [{
          value: 'china_mobile',
          label: '移动'
        }, {
          value: 'china_unicom',
          label: '联通'
        }, {
          value: 'china_telecom',
          label: '电信'
        }, {
          value: 'virtual_carrier',
          label: '虚拟运营商'
        }],
        tableData: [],
        carrier_type: '',
        param: ''
      }
    },
    created() {
      this.param = new FormData();
    },
    mounted() {
      this.getCarrierData()
      this.title = this.$store.getters.alert.msg
      this.type = this.$store.getters.alert.status
    },
    methods: {
      beforeupload(file) {
        this.param.append('file', file, file.name);
      },
      submitUpload() {
        this.$refs.upload.submit();
        // this.$axios.post('/api/carriers/upload_test', {
        //   name: this.ruleForm.company_name
        // }).then((res) => {
        //   this.dialogVisible1 = false
        // })
        // var names = this.ruleForm.company_name;
        // //下面append的东西就会到form表单数据的fields中；
        // this.param.append('message', names);
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        //然后通过下面的方式把内容通过axios来传到后台
        //下面的this.$reqs 是在主js中通过Vue.prototype.$reqs = axios 来把axios赋给它;
        this.$axios.post("/api/carriers/upload_test", this.param, config).then(function(result) {
          console.log(result);
        })
      },
      submitUpload1() {
        this.$refs.upload1.submit();
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        //然后通过下面的方式把内容通过axios来传到后台
        //下面的this.$reqs 是在主js中通过Vue.prototype.$reqs = axios 来把axios赋给它;
        this.$axios.post("/api/carriers/upload_test", this.param, config).then(function(result) {
          console.log(result);
        })
      },
      handlePreview(file) {
        console.log(file);
      },
      selectCarrierName() {
        ///carriers/search_carriers?carrier_type
        if (this.formInline.user) {
          this.$axios.get(`/api/carriers/search_carriers?key=${this.formInline.user}`).then((res) => {
            console.log(res)
            this.tableData = res.data.datas
          })
        }
      },
      selectCarrier() {
        this.$axios.get(`/api/carriers/search_carriers?carrier_type=${this.carrier_type}`).then((res) => {
          this.formInline.user = ''
          this.tableData = res.data.datas
          this.dialogVisible = false
        })
      },
      editSingData(goods) {
        this.$router.push({
          path: `/carriers/edit`,
          query: {
            id: goods.id
          }
        })
      },
      deleteSingData(goods) {
        this.$confirm('确定删除吗?')
          .then(_ => {
            this.$axios.delete(`/api/carriers/${goods.id}`).then((res) => {
              this.title = res.data.msg
              this.type = res.data.status
              this.tableData = res.data.datas.datas
            })
          })
          .catch(_ => {});
      },
      getDetail(goods) {
        this.$router.push({
          path: `/carriers/${goods.id}`
        })
        this.$store.commit('setCarrier', goods)
      },
      getCarrierData() {
        this.$axios.get('/api/carriers?page=1').then((res) => {
          if (res.data.datas.length > 0) {
            this.tableData = res.data.datas
            this.total = Number(res.data.total_pages)
          }
        })
        this.formInline.user = ''
      },
      currentChange(val) {
        this.pageNow = val
        this.$axios.get(`/api/carriers?page=${val}`).then((res) => {
          if (res.data.datas.length > 0) {
            this.tableData = res.data.datas
          }
        })
        this.formInline.user = ''
      },
      prevClick(val) {
        this.$axios.get(`/api/carriers?page=${val}`).then((res) => {
          if (res.data.datas.length > 0) {
            this.tableData = res.data.datas
          }
        })
        this.formInline.user = ''
      },
      nextClick(val) {
        this.$axios.get(`/api/carriers?page=${val}`).then((res) => {
          if (res.data.datas.length > 0) {
            this.tableData = res.data.datas
          }
        })
        this.formInline.user = ''
      },
      sizeChange(val) {
        this.$axios.get(`/api/carriers?page=${val}`).then((res) => {
          if (res.data.datas.length > 0) {
            this.tableData = res.data.datas
          }
        })
        this.formInline.user = ''
      }
    },
    components: {
      Alert,
      Pagination
    },
    beforeRouteLeave(to, from, next) {
      this.$store.commit('setAlert', '')
      next()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .mt_2 {
    margin-top: -2px;
  }
  
  .tr {
    text-align: right;
  }
  
  .lh33 {
    line-height: 33px;
  }
  
  .w100 {
    width: 100%;
  }
  
  .el-pagination {
    float: right;
  }
</style>
